<template>
  <div class="item-order-details">
    <itemSwiper />
    <div class="order-details-info">
      <div class="money">￥59.9-39.9</div>
      <div class="title">庆阳红富士1.5kg</div>
      <div class="describe">红彤彤，口感好！谁人吃了都说是宝！</div>
      <div class="sales">已售：3699</div>
    </div>

    <div class="order-chiose">
      <div>
        <span>已选</span>
        <span class="spec">1.5Kg 普通装</span>
      </div>
      <div>></div>
    </div>

    <div class="order-details">
      <div class="title">产品详情</div>
      <img
        src="@/assets/pic3.png"
        alt=""
      >
    </div>

    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        info="5"
      />
      <van-goods-action-button
        color="#F9C023"
        type="warning"
        text="加入购物车"
        @click="show=true"
      />
      <van-goods-action-button
        color="#D63A54"
        type="danger"
        text="立即购买"
        @click="show=true"
      />
    </van-goods-action>
    <!-- :goods-id="goodsId" -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
    />
    <!-- :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked" -->
  </div>
</template>

<script>
import itemSwiper from '@/components/banner'
export default {
  components: {
    itemSwiper
  },
  data() {
    return {
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            v: [
              {
                id: '30349', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'https://img.yzcdn.cn/1p.jpg' // 用于预览显示的规格类目图片
              },
              {
                id: '1215',
                name: '蓝色',
                imgUrl: 'https://img.yzcdn.cn/2.jpg',
                previewImgUrl: 'https://img.yzcdn.cn/2p.jpg'
              }
            ],
            k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
            s3: '0', // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: '￥39.9-￥39.9', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: '留言', // 留言名称
            type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: '1', // 是否必填 '1' 表示必填
            placeholder: '' // 可选值，占位文本
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 商品标题
        title: '庆阳红富士现摘现发',
        // 默认商品 sku 缩略图
        picture: 'https://img.yzcdn.cn/1.jpg'
      },
      messageConfig: {
        // 数据结构见下方文档
        quotaText: '每次限购xxx件',
        // 自定义步进器超过限制时的回调
        handleOverLimit: (data) => {
          // const { action, limitType, quota, quotaUsed } = data
        }
      },
      // 步进器变化的回调
      handleStepperChange: currentValue => {},
      // 库存
      stockNum: 1999,
      // 格式化库存
      stockFormatter: stockNum => {}
    }
  }
}
</script>

<style lang="less">
.item-order-details {
  width: 100%;
  background: #f5f6f8;
  .order-details-info {
    padding: 10px;
    background: #fff;
    position: relative;
    // border:1px solid #000;
    margin-bottom: 10px;
    .money {
      color: #d63a54;
      font-size: 18px;
      font-weight: bold;
      padding: 3px 0;
    }
    .title {
      font-size: 16px;
      color: #000;
      font-weight: bold;
      padding: 3px 0;
    }
    .describe {
      color: #999999;
    }
    .sales {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 14px;
      color: #999;
    }
  }
  .order-chiose {
    background: #fff;
    padding: 10px;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    span {
      color: #999;
    }
    .spec {
      color: #d63a54;
      padding-left: 10px;
    }
    div {
      color: #999;
    }
  }
  .order-details {
    background: #fff;
    padding: 10px 0;
    .title {
      padding: 10px 0;
      text-align: center;
      color: #333333;
      border-bottom: 1px solid #e5e5e5;
    }
    img {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .van-goods-action-button--first {
    margin-left: 5px;
    margin-right: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .van-goods-action-button--last {
    margin-right: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
</style>
